<template>
	<view class="wrap" :style="{'height':windowHeight}">
		<view class="content">
			<u-avatar :src="vuex_logo" size="140"></u-avatar>
			<view class="title">用户登录</view>
			<view class="version">verion: 2.0</view>
			
			<u-form class="form" :model="formData" ref="uForm" label-position="top">
				<u-form-item label="">
					<u-icon class="icon" name="account" />
					<u-input v-model="formData.username" placeholder="请输入用户名"></u-input>
				</u-form-item>
				<u-form-item label="">
					<u-icon class="icon" name="lock" />
					<u-input v-model="formData.password" placeholder="请输入密码" type="password"></u-input>
				</u-form-item>
				<u-button class="submit" size="medium" type="primary" @click="submit"
					:disalbed="vuex_ip_current.ip === null || vuex_ip_current.ip === undefined">
					<text>登录</text>
				</u-button>
			</u-form>
			<view class="ip-info">
				<span v-if="vuex_ip_current.ip">
					IP地址:{{vuex_ip_current.ip}}/服务端口:{{vuex_ip_current.server_port}}/设备端口:{{vuex_ip_current.device_port}}
				</span>
				<span v-else>未配置</span>
			</view>
		</view>

		<view class="bottom">
			<u-divider half-width="42%" class="divid er-line">云平台设置</u-divider>
			<br />
			<u-button size="medium" type="blank" @click="setIpAddress">
				<text>点击设置</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import vTopHeader from '@/components/v-top-header.vue'
	export default {
		components: {
			vTopHeader
		},
		data() {
			return {
				windowHeight: null,
				formData: {
					username: null,
					password: null
				}
			}
		},
		onLoad() {
			this.windowHeight = this.$u.sys().windowHeight + 'px'
			// console.log(this.windowHeight)
		},
		onShow() {
			this.loadLogo()
		},
		onReady() {
			this.loadBackground()
		},
		methods: {
			submit() {
				let that = this
				if (this.vuex_ip_current.ip === null || this.vuex_ip_current.ip === undefined) {
					that.$u.toast('服务器IP未设置！')
					uni.navigateTo({
						url: '../config/index'
					})
					return;
				}
				if (that.formData.username == null || that.formData.username == '') {
					that.$u.toast('请输入用户名')
					return
				} else if (that.formData.password == null || that.formData.password == '') {
					that.$u.toast('请输入密码')
					return
				}
				that.$u.api.login(that.formData).then(res => {
					// console.log('login res=>', res)
					//跨域了，强制登录
					if (res.success) {
						// console.log('res.result.token=' + res.result.token)
						that.$u.vuex("vuex_token", res.result.token)
						console.log(res.result.userInfo)
						that.$u.vuex('vuex_user', res.result.userInfo)
						this.$u.route({
							type: 'reLaunch',
							url: '/pages/home/index'
						})
					} else {
						that.$u.toast('登录校验失败')
					}
				}).catch(e => {
					console.log(e)
					that.$u.toast('登录异常')
				})
			},
			setIpAddress() {
				uni.navigateTo({
					url: '/pages/config/index'
				})
			},
			loadLogo() {
				if (this.vuex_ip_current.ip == null) return;
				this.$u.api.getLogo().then(res => {
					if (res.success) {
						this.$u.vuex('vuex_logo', res.result.url)
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			loadBackground() {
				if (this.vuex_ip_current.ip == null) return;
				this.$u.api.getBackgroundImage().then(res => {
					if (res.success) {
						this.$u.vuex('vuex_bg_image', res.result.url)
					}
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;

		.content {
			padding: 120upx 40upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				text-align: center;
				color: #333;
				margin-top: 20%;
				font-size: 66upx;
				font-weight: bold;
			}
			
			.version {
				text-align: center;
				font-size: 30rpx;
			}

			.form {
				margin-top: 40upx;
				width: 100%;

				.icon {
					margin-right: 20upx;
				}

				.submit {
					width: 100%;
					height: 80upx;
					margin-top: 80upx;
					font-size: 32upx;
					background-color: #000;
				}
			}

			.ip-info {
				margin-top: 40upx;
			}
		}

		.bottom {
			font-size: 26upx;
			color: #666;
			position: absolute;
			padding-bottom: 40upx;
			width: 100%;
			bottom: 0;
			text-align: center;

			.divider-line {
				padding-bottom: 30rpx;
			}
		}
	}
</style>